<template>
  <div class="admin-page">
    <nav class="sidebar">
      <div class="sidebar-header">
        <h3>奖学金</h3>
      </div>
      <ul class="list-group">
        <li class="list-group-item"><router-link to="/">注销</router-link></li>
      </ul>
    </nav>

    <main class="main-content">
      <div class="table">
        <table>
          <thead>
          <tr>
            <th style="color: #ffffff; background-color: #a42a2a;">姓名</th>
            <th style="color: #ffffff; background-color: #a42a2a;">年级</th>
            <th style="color: #ffffff; background-color: #a42a2a;">分数</th>
          </tr>
          </thead>
          <tbody>
          <!-- 假定的已有数据行，这里仅作为示例 -->
          <tr v-for="student in students" :key="student.id">
            <td>{{ student.name }}</td>
            <td>{{ student.grade }}</td>
            <td>{{ student.award }}</td>
          </tr>
          <!-- 新增的输入行 -->
          <tr>
            <td><input type="text" placeholder="姓名" style="width: 100%; box-sizing: border-box;"></td>
            <td><input type="text" placeholder="年级" style="width: 100%; box-sizing: border-box;"></td>
            <td><input type="text" placeholder="分数" style="width: 100%; box-sizing: border-box;"></td>
          </tr>
          </tbody>
        </table>
      </div>
      <button @click="editStudent" class="submit-button">提交</button>
    </main>
  </div>
</template>

<script>
export default {
  name: 'AdminPage',

  data() {
    return {
    };
  },
}

</script>

<style scoped lang="scss">

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}



.admin-page {
  display: flex;
  height: 100vh;
}
h3{
  text-align: left;
  font-size: 1.5em;
  font-weight: 400;
  margin-top: -3%;
  transform: translateX(30px);
}
.sidebar {
  width: 200px;
  background-color: #a42a2a;
  color: white;
  padding: 20px 0;
}

.sidebar-header, .list-group-item {
  padding: 10px;
}

.sidebar-header h3 {
  margin-bottom: 0;
}

.list-group-item a {
  color: white;
  text-decoration: none;
}

.list-group-item a:hover {
  text-decoration: underline;
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  overflow: auto;
}
</style>